<template>
    <div class="order_catchpddlogs">
        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：生产管理>抓单管理>拼多多抓单记录</div>
        <div style="height: 16px; width: 100%; background: #F9F9F9;"></div>

        <div class="team">
            <div class="powertop">
                <router-link class="powertopli" to="/order_catch/order_catchjd">京东抓单</router-link>
                <router-link class="powertopli powertopact" to="/order_catch/order_catchpdd">拼多多抓单</router-link>
                <router-link class="powertopli" to="/order_catch/order_catchtm">天猫抓单</router-link>
            </div>
            <div class="centerall">
                <!-- <div class="t-img">
                    <img src="../../../static/img/catchyz.png">
                </div> -->
                <div class="back"><router-link to="/order_catch/order_catchpdd"><i class="el-icon-arrow-left"></i>返回上层</router-link></div>
                <div style="margin-top: 20px;" v-loading="loading">
                  <el-table
                    :data="tableData"
                    style="width: 100%;"
                    :header-cell-style="rowClass"
                    :cell-style="cellClass"
                  >
                    <el-table-column prop="source_id" label="外部订单号"></el-table-column>
                    <el-table-column prop="status" label="抓单状态"></el-table-column>
                    <el-table-column prop="reason" label="原因"></el-table-column>
                  </el-table>
                  <div class="fenye">
                    <el-pagination
                      background
                      layout="total,prev, pager, next"
                      :current-page="page"
                      @current-change="fanye"
                      :page-size="page_size"
                      :total="total"
                    ></el-pagination>
                  </div>
                </div>
            </div>

        </div>

    </div>

</template>

<script>
    import axios from 'axios'
    export default{
    	name : "order_catchpddlogs",
    	data(){
    		return {
          tableData: [],
          total: 0,
          page_size: 20,
          page: 1,
          loading: true,
          id: ''
    		}
    	},
    	created() {
        this.id = this.$route.query.id
        this.getData()
    	},
    	mounted(){

    	},
    	methods: {
        rowClass({ row, rowIndex }) {
          return "background:#eaeaea;text-align:center;font-size:14px;font-weight:normal;color:#000";
        },
        cellClass({ row, column, rowIndex, columnIndex }) {
          return "text-align:center;font-size:14px;color:#000";
        },
        getData(){
          axios.get('/api/gth/orderslogs?source=pdd&shop_id='+ this.id+'&page='+this.page+'&page_size='+this.page_size)
            .then(response => {
            if(response.data.msg.code == 0){
              let data = response.data.data
              console.log(data);
              this.tableData = data.data
              for(let i in this.tableData){
                this.tableData[i].reason = this.tableData[i].status === 0 ? this.tableData[i].reason : ''
                this.tableData[i].status = this.tableData[i].status === 0 ? '未抓' : '已抓'
              }
              this.page = data.current_page
              this.total = data.total
              this.loading = false
            }else{
              this.$message.error(response.data.msg.info);
            }

          })
        },
        //翻页
        fanye: function(val) {
          console.log(val);
          this.page = val;
          this.getData();
        },
      },
    }
</script>

<style lang="scss" scoped>
    .order_catchpddlogs{
        .says48{ line-height: 25px; padding: 20px 0;}
        .team{ background: #F9F9F9;

            .powertop{ display: flex; width: 640px;}
            .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #F9F9F9 solid; color: #727272;  font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
            .centerall{ padding: 20px; background: #FFFFFF; color: #666;
                .t-img{ margin-bottom: 20px; position: relative;
                    img{ width: 100%;}
                    .t-email{ position: absolute; background: #FFFFFF; color: #DD2727; font-size: 14px; right: 20px; padding: 5px 10px; top: 26px; cursor: pointer;}
                    .t-48{ position: absolute; background: #FFFFFF; color: #DD2727; font-size: 14px; right: 160px; padding: 5px 10px; top: 26px; cursor: pointer;}
                }
                .back a{ color:#409EFF}
                .cooktitle{ font-size: 14px; font-weight: bold; margin: 20px 0;}
                .cookp{margin-bottom: 10px;
                  img{ max-width: 90%;}
                }
            }

        }
      .fenye {
        text-align: right;
        margin: 20px 0;
      }

    }
</style>
